<template>
    <div class="radio">
        <h1>
            单选题
        </h1>
        <div class="for" v-for="it in radio" :key="it.id">
            <input type="radio" :name="it.name" :id="it.id" v-model="param" :value="it.value"><label
                :for="it.id">{{it.name}}</label>
            <br>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                param: '',//设置默认值为1，即设置第一个单选框为选中状态,
                radio: {
                    radio1: {
                        name: "name1",
                        id: "name1",
                        value: "1",
                    },
                    radio2: {
                        name: "name2",
                        id: "name2",
                        value: "2",
                    },
                },

            }
        }

    }
</script>

<style lang="less" scoped>
    .radio {
        width: 100%;
        height: 100%;
        border-bottom: 1px solid #bbb;
        padding-bottom: 1vh;
        margin-top: 3vh;

        h1 {
            font-size: 15px;
            font-weight: 500;
            padding: 1vw;
            margin-left: 2vw;
        }

        .for {
            font-size: 15px;
            font-weight: 500;
            margin-top: 1vh;
            margin-left: 2vw;

            label {
                margin-left: 1vw;

            }
        }
    }
</style>